import React, { Component } from 'react';
//本地图片必须单独导入
import {index_nav} from '../api/index'
import '../styles/List.css'

//在class组件中,任何一个方法内,都可以通过this获取到当前组件实例
class List extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[]
        }
    }
    componentDidMount(){
        index_nav().then((res)=>{
            //console.log(res.data.list);
            this.setState({
                list:res.data.list
            })
        })
    }

    //render 方法负责组件内容的渲染
    render() {
        return (
            <div className='list'>
                
                {
                    //这块是js代码  列表渲染,列表中每个列表项必须都有一个唯一的key值
                    //this.state.list.length==0?
                    this.state.list.map((item,index)=>{
                        return(
                            <div className="item" key={index}>
                                <img src={item.pic} alt="" />
                                <div className="name">{item.name}</div>
                            </div>
                        )
                    })
                }
                {
                    //如果列表为空,显示提示标签  (t条件渲染)
                    this.state.list.length==0?
                    <div className="empty">网络异常,请尝试刷新页面</div>
                    :''
                }
            </div>
        );
    }
}

export default List;